<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <script src="/static/bootstrap/js/jquery-2.1.4.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>

    <title>试卷查询</title>
</head>
<body>
    {{ kaotiform.kaoti }}
    <button onclick="jinsuo(this);" class="btn btn-default">紧缩</button>
    <table id="show_table" class="table">

    </table>

    <script>
        function jinsuo(self) {
            $('.table tr,td').css('padding','0px')
        }
        $('#id_kaoti').change(function () {
            $('#show_table').text('')
            $.ajax({
                url: '',
                type: 'post',
                data: {id:$(this).val()},
                dataType: 'json',
                success: function (arg) {
                    console.log(arg);
                    $.each(arg,function (x,y) {
                        tr = $('<tr></tr>')


                        th = $('<th></th>')
                        p = $('<span>'+y.bianhao+'、</span>');th.append(p[0])
                        p = $('<span>('+y.leixing.substring(2)+')</span>');th.append(p[0])
                        p = $('<span>'+y.tigan+'</span>');th.append(p[0])
                        tr.append(th[0])


                        td1 = $('<td></td>')
                        if(y.leixing.substring(2)=='判断'){
                            if(y.daan.trim()=='A'){
                                p = $('<p>答案：<span style="color:red;">'+'正确'+'</span></p>');td1.append(p[0])
                            }
                            if(y.daan.trim()=='B'){
                                p = $('<p>答案：<span style="color:red;">'+'错误'+'</span></p>');td1.append(p[0])
                            }
                            tr.append(td1)
                        }else{
                            td2 = $('<td></td>');p = $('<p>A、'+y.xxa+'</p>');td2.append(p);tr.append(td2)
                            td3 = $('<td></td>');p = $('<p>B、'+y.xxb+'</p>');td3.append(p);tr.append(td3)
                            td4 = $('<td></td>');p = $('<p>C、'+y.xxc+'</p>');td4.append(p);tr.append(td4)
                            td5 = $('<td></td>');p = $('<p>D、'+y.xxd+'</p>');td5.append(p);tr.append(td5)
                            td6 = $('<td></td>');p = $('<p>答案：<span style="color:red;">'+y.daan+'</span></p>');td6.append(p);tr.append(td6)
                        }

                        $('#show_table').append(tr)
                        {#$('div').css()#}
                    })
                }
            })
        })

    </script>
    <style>
            body{
                margin: 0 auto;
                background-color: gainsboro;
            }
            tr,td{
                display: block;
            }
            .table{
                width: 80%;
            }
    </style>
</body>
</html>